<template>
	<view>
		<view class="middle-top">
			<text>剩余单词： {{ surplusWordNum }}</text>
			<button size="mini" plain @click="openPlan()"><image class="edit-icon" src="../../static/home/edit.svg"></image> 学习计划</button>
			<uni-popup ref="popup" type="bottom">
				<view class="learn-plan">
					设置学习计划
				</view>
			</uni-popup>
		</view>
		<view class="middle-cutting"></view>
		<view class="middle-content">
			<view class="content-box surplus-word">
				<view class="content-num">
					<!-- {{daySurplusWordNum}} -->
					0
				</view>
				今日剩余
			</view>
			<view class="content-box learned-word">
				<view class="content-num">
					<!-- {{learned}} -->
					0
				</view>
				本书已学
			</view>
			<view class="content-box surplus-day">
				<view class="content-num">
					<!-- {{surplusDay}} -->
					0
				</view>
				剩余天数
			</view>
		</view>
		<button class="start-btn">开始学习</button>
	</view>
</template>

<script>
export default {
	name: 'wordControl',
	props: {
		surplusWordNum: Number,
		daySurplusWordNum: 0,
		learned: 0,
		surplusDay: 15
	},
	data() {
		return {};
	},
	methods: {
		openPlan() {
			this.$refs.popup.open('center');
		}
	},
};
</script>

<style scoped lang="scss">
.middle-top {
	height: 5vh;
	box-sizing: border-box;
	font-size: $base-size;
	display: flex;
	align-items: center;
	button {
		border: 2rpx solid $base-color;
		height: 4.3vh;
		border-radius: 60rpx;
		line-height: 4vh;
		margin-right: 2rpx;
		display: flex;
		align-items: center;
	}
	.edit-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
}
.middle-cutting {
	height: 1vh;
	border-radius: 1vh;
	background-color: #dadada;
	margin-bottom: 1vh;
}
.middle-content {
	display: flex;
	justify-content: space-around;
	.content-box {
		height: 10vh;
		width: 30vw;
		margin: 2vw;
		text-align: center;
		font-size: 30rpx;
	}
	.content-num {
		font-size: 50rpx;
	}
}

.start-btn {
	background-color: $base-color;
	border-radius: 40rpx;
	width: 50vw;
	height: 70rpx;
	line-height: 70rpx;
	margin-top: 1vh;
}

.learn-plan {
	width: 90vw;
	height: 50vh;
	border-radius: 4vw;
	background-color: $base-color;
}
</style>
